import { Avatar } from '@lobehub/ui';
import { useSessionStore } from '@/store/session';
import { useHover } from 'ahooks';
import { Typography } from 'antd';
import { useThemeMode, useResponsive } from 'antd-style';
import { memo, useRef } from 'react';
import { Flexbox } from 'react-layout-kit';

// import { useMarketStore } from '@/store/market';
import { AgentsMarketIndexItem } from '@/types/market';

import AgentCardBanner from './AgentCardBanner';
import Link from 'next/link';
import { SESSION_CHAT_URL } from '@/const/url';
import { sessionSelectors } from '@/store/session/selectors';
import { useStyles } from './style';

const { Paragraph } = Typography;

const AgentCardItem = memo<AgentsMarketIndexItem>(({ meta, id }) => {
  const ref = useRef(null);
  const isHovering = useHover(ref);
  // const onAgentCardClick = useMarketStore((s) => s.activateAgent);
  const { styles, theme } = useStyles();
  const { isDarkMode } = useThemeMode();
  // const createSession = useSessionStore((s) => s.createSession);

  const { avatar, title, description, backgroundColor } = meta;
  const { mobile } = useResponsive();
  const [activeSession, switchSession] = useSessionStore((s) => [
    s.activeSession,
    s.switchSession,
    sessionSelectors.isSessionListInit(s),
  ]);
  console.log(activeSession)
  return (
    <Flexbox className={styles.container}>
      <Link
        aria-label={id}
        href={SESSION_CHAT_URL(id, mobile)}
        onClick={(e) => {
          e.preventDefault();
          switchSession(id)
        }}
      >
        <AgentCardBanner meta={meta} style={{ opacity: isDarkMode ? 0.9 : 0.4 }} />
        <Flexbox className={styles.inner} gap={8} ref={ref}>
          <Avatar
            animation={isHovering}
            avatar={avatar}
            background={backgroundColor || theme.colorFillTertiary}
            size={56}
          />
          <div>
            <Paragraph className={styles.title} ellipsis={{ rows: 1, tooltip: title }}>
              {title}
            </Paragraph>
            <Paragraph className={styles.desc} ellipsis={{ rows: 2, tooltip: description }}>
              {description}
            </Paragraph>
          </div>
        </Flexbox>
      </Link>
    </Flexbox>
  );
});

export default AgentCardItem;
